<template>
  <div>
    <div id="mainklh">
    </div>
    <p style="font-size:0.4rem;">force04</p>
  </div>

</template>

<script>
  export default{
    props:['datal'],
    data(){
      return{
        tabledata:[],
        tabledataya:[],//x轴参数
        tabledatayc:[],//y轴参数
        tabledatayb:[],//离枕时间
      }
    },
    created() {
      //用于px转换rem，echarts读取不到rem，所以这里要换算
      var d = document.documentElement;
      var cw = d.clientWidth || 750;
      document.documentElement.style.fontSize = (cw/750 * 100) + 'px';
      this.getLoading();
    },
    mounted() {
      this.showCharts()
    },
    methods:{
      getLoading(){
        var that=this;
        that.tabledata=that.datal;
        let ag=that.tabledata;
        that.tabledataya=[];//这是x轴数据,例:“22：00”
        that.tabledatayc=[];//这是y轴显示百分比的地方,例:10%
        that.tabledatayb=[];//这是离枕时间
        for(var i=0;i<ag.length;i++){
          that.tabledataya.push(ag[i].yb)//这是x轴数据
          that.tabledatayc.push(ag[i].ya)//这是y轴显示百分比的地方
          that.tabledatayb.push(ag[i].yc)//这是离枕时间
        }

      },
      //rem转换px
      remToPx(rem) {
        var fontSize = document.documentElement.style.fontSize;
        return Math.floor(rem * fontSize.replace('px', ''));
      },
      showCharts(){

         // 基于准备好的dom，初始化echarts实例,采用svg渲染
         var myChart = this.$echarts.init(document.getElementById('mainklh'),null, {renderer: 'svg'});

         // 绘制图表
         var data = this.tabledatayc;
         var titlename = this.tabledataya;
         var dataH = this.tabledatayb;

         var option = {
             backgroundColor: '#0f2e6f',
             grid: {
               left: this.remToPx(0.3),
               top: '12%',
               right: this.remToPx(0.6),
               bottom: '8%',
               containLabel: true,

              },
             xAxis: {
                 type: 'category',
                 // boundaryGap: false,
                 data: titlename,
                 axisLabel: {
                     textStyle: {
                       color:'#5c79b5',
                       fontSize:this.remToPx(0.28),
                     },
                     margin:this.remToPx(0.15),
                 },
                 axisLine:{
                   lineStyle:{
                     color:"#000000",
                   }
                 },
                 axisTick:{
                   alignWithLabel :true,
                 },
                 triggerEvent:false,
             },
             yAxis: [{
                 show:true,
                 type:'value',
                 position :'right',
                 offset:this.remToPx(0.2),//偏移量
                 axisLine :{
                   show:false,
                   lineStyle:{
                     color:'#6b84b0',
                   },

                 },
                 splitLine:{//是否现实y轴分割线
                   show:false,
                 },
                 axisLabel:{
                   margin :this.remToPx(0.3),
                 },
                 triggerEvent:false,

             }],
             series: [{
                 name: 'front',
                 type: 'bar',
                 data: data,
                 barWidth :this.remToPx(0.2),
                 barCategoryGap :"100%",
                 itemStyle: {
                     normal: {
                         color:function(data){
                           if(data.value<=20){
                              return "#1a8595";
                           }
                           else if(data.value>20 && data.value<30){
                             return "#1b808a";
                           }else if(data.value>=30 && data.value<50){
                             return "#ccdc9b";
                           }else if(data.value>=50 && data.value<90){
                             return "#eb5255";
                           }

                         },
                         barBorderRadius: this.remToPx(0.8),
                     }
                 },

             },
             {
               name: 'front',
               type: 'bar',
               data: dataH,
               barWidth :this.remToPx(0.04),
               barCategoryGap :"100%",
               barGap :"10%",
               itemStyle: {
                   normal: {
                       color:"#33d0e9",
                       barBorderRadius: this.remToPx(0.8),
                   }
               },
             }],
             animationEasing: 'elasticOut',
             animationEasingUpdate: 'elasticOut',
             animationDelay: function (idx) {
                 return idx * 20;
             },
             animationDelayUpdate: function (idx) {
                 return idx * 20;
             }
         };


         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
      }
    }
  }
</script>

<style>
  body{
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
   }
  #mainklh{
    width:100%;height:4rem;float:left;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
</style>
